<template>
  <div class="container">
    <el-form ref="form" :inline="true" :model="pageGrid" style="border-bottom:0px;">
      <el-form-item>
        <el-input v-model="pageGrid.account" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="pageGrid.searchValue" placeholder="联系人姓名/电话"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="userPageList">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button class="mb_15" type="primary" icon="el-icon-plus" @click="isShowDialog = true">新增</el-button>
    <el-table
        v-loading="isLoading"
        sortable="custom"
        :data="tableData"
        border class="table" ref="multipleTable">
      <el-table-column type="index" align="center" label="序号"></el-table-column>
      <el-table-column prop="account" align="center" :show-overflow-tooltip="true" label="账号"></el-table-column>
      <el-table-column prop="role" align="center" :show-overflow-tooltip="true" label="角色"></el-table-column>
      <el-table-column prop="name" align="center" :show-overflow-tooltip="true" label="联系人姓名"></el-table-column>
      <el-table-column prop="mobile" align="center" :show-overflow-tooltip="true" label="联系人手机号"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="editUser(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteAccount(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageGrid.pageNo"
          :page-sizes="pageSizeArr"
          :page-size="pageGrid.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

    <!--新增用户-->
    <el-dialog :close-on-click-modal="false" title="账号管理" :visible.sync="isShowDialog" width="700px">
      <el-form :model="addInfo" :rules="rules" ref="addInfo" :inline="true" label-width="100px">
        <el-form-item prop="account" label="账号名" class="p_r">
          <el-input v-model="addInfo.account" placeholder="必填，最多20个字" maxLength="20"></el-input>
        </el-form-item>
        <el-form-item prop="name" label="姓名">
          <el-input v-model="addInfo.name" placeholder="必填，最多10个字" maxLength="10"></el-input>
        </el-form-item>
        <el-form-item prop="mobile" label="手机号">
          <el-input v-model="addInfo.mobile" autocomplete="off" placeholder="11个数字" maxLength="11"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码" class="p_r" v-if="!isEdit">
          <el-input v-model="addInfo.password" autocomplete="off" placeholder="必填，最多30个字" maxLength="30" type="password"></el-input>
        </el-form-item>
        <el-form-item prop="role" label="角色">
          <el-select v-model="addInfo.role">
            <el-option v-for="item in roleSelect" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <div class="login-btn t_r">
          <el-button @click="isShowDialog = false">取消</el-button>
          <el-button type="primary" @click="submitForm('addInfo')">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import api  from '../../../api/index';
  import commonInfo from '../../../utils/common'

  export default {
    name: "personManagement",
    watch:{
      isShowDialog(n){
        if(!n) {
          this.delAddInfo();
          this.isEdit = false;
        }
      }
    },
    data() {
      return {
        pageSizeArr:commonInfo.pageSizeArr,
        rules: {
          account: [
            { required: true, message: ' ', trigger: 'blur' }
          ],
          password: [
            { required: true, message: ' ', trigger: 'blur' }
          ],
          name: [
            { required: true, message: ' ', trigger: 'blur' }
          ],
          mobile: [
            { validator: this.validateNumber, trigger: 'change'},
            { required: true, message: ' ', trigger: 'blur' }
          ],
          role: [
            { required: true, message: ' ', trigger: 'change' }
          ],
        },
        isShowDialog:false,
        isLoading:false,
        roleSelect:[],
        tableData:[],
        total:0,
        pageGrid: {
          pageNo: 1,
          pageSize:10,
          account:null,
          searchValue:null
        },
        addInfo:{
          account:'',
          password:'',
          mobile:'',
          name:'',
          role:'',
        },
        isClick:true,
        isEdit:false,
      }
    },
    created(){
      this.getRoleList();
      this.userPageList();
    },
    methods:{
      validateNumber(even, data, callback){
        var re = /^1[3456789]\d{9}$/;
        if (!re.test(data)) {
            callback(new Error('请输入电话号码!'));
        }else{
            callback();
        }
      },
      //编辑
      editUser(index,row){
        this.isShowDialog = true;
        this.isEdit = true;
        this.addInfo = row;
      },
      //新增弹窗清空
      delAddInfo(){
        this.addInfo = {
          account:'',
          password:'',
          mobile:'',
          name:'',
          role:'',
        }
      },
      delSuccessSave(res){
        this.isClick = true;
        if(res.code == 200){
          this.$message.success('保存成功！');
          this.delAddInfo();
          this.userPageList();
          this.isShowDialog = false;
        }
      },
      deleteAccount(index, row) {
        this.$confirm("确认删除？")
          .then((_) => {
            api.deleteAccount({ account: row.account }).then((res) => {
              if (res.code == 200) {
                this.$message.success('删除成功！');
                this.pageGrid.pageNo = 1;
                this.userPageList();
              } else {
                this.$message.error(res.msg);
              }
            });
          })
          .catch((_) => {});
      },
      //新增编辑
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let send = JSON.parse(JSON.stringify(this.addInfo));
            if(!this.isClick) return;
            this.isClick = false;
            if(send.id){
              api.updateUser(send).then((res) => {
                this.delSuccessSave(res)
              },error => {
                this.isClick = true;
              })
            }else{
              api.createUser(send).then((res) => {
                this.delSuccessSave(res)
              },error => {
                this.isClick = true;
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //重置搜索条件
      resetSearch(){
        this.pageGrid = {
          pageSize: 10,
          pageNo: 1,
          account:'',
          searchValue:''
        }
      },
      //获取所有角色下拉
      getRoleList(){
        api.getRoleList().then((res) => {
          if(res.code === 200){
            this.roleSelect = res.data;
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      //获取所有用户
      userPageList(){
        this.pageGrid.account = this.pageGrid.account ? this.pageGrid.account : null;
        this.pageGrid.searchValue = this.pageGrid.searchValue ? this.pageGrid.searchValue : null;
        this.isLoading = true;
        api.userPageList(this.pageGrid).then((res) => {
          if(res.code === 200){
            this.tableData = res.totalElement;
            this.total = res.total;
          }else{
            this.$message.error(res.msg);
          }
          this.isLoading = false;
        })
      },

      //分页
      handleCurrentChange(val){
        this.pageGrid.pageNo = val;
        this.userPageList();
      },
      //分页
      handleSizeChange(val){
        this.pageGrid.pageSize = val;
        this.userPageList();
      },
    }
  }
</script>

<style scoped lang="less">
  .border_out{
    box-shadow: 0 0 2px 2px #e4e4e4;
    box-sizing: border-box;
    padding: 10px;
    table{
      table-layout: fixed;
      border: none;
      width: 100%;
      td{
        line-height: 30px;
      }
    }
  }
  .detail_title{
    font-size: 16px;
    margin-bottom: 15px;
  }
  .el-form--inline{
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 10px;
    .el-input,.el-select{
      width: 200px;
    }
  }
  .tips{
    color: red;
    font-size: 12px;
    width: 100%;
    display: inline-block;
    line-height: 1;
    top: 35px;
    left: 0;
  }
  .form_title{
    font-size: 16px;
    color: #20a0ff;
    padding-left: 20px;
    margin-bottom: 15px;
    &.role{
      margin-top: 30px;
    }
  }
</style>
